<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-05-06 10:53:00
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-05-07 10:09:00
 * @FilePath: \Webgl-basic\1.webgl快速体验.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>2.webgl绘制点.html</title>    
    <style>
        canvas {
            display: block;
            margin: 0 auto;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <canvas width="400" , height="400"></canvas>
    <script type="text/javascript" src="./lib/index.js"></script>
    <script>
        const canvas = document.querySelector('canvas')
        //获取webgl上下文
        const gl = canvas.getContext('webgl')
        //定义点顶点着色器(字符串)
        const vs_shader = /*glsl*/`
          // 指定浮点数精度为中等精度  
          precision mediump float;//glsl语法每一行后面都要加上分号,每一行后面都要加上分号
          //glsl语法中,必须有一个入口函数main shaderToy里面叫mainImage cesuim里面可能叫czm_Main
          void main(){
            //gl_Position 是最后输出的坐标值,Vect4是四维向量,具有四个分量,每一个分量都是float
            gl_Position=vec4(0.0,0.0,0.0,1.0);
            //gl_PointSize是最后输出点的像素大小  float
            gl_PointSize = 10.0;
          }`
          //片元着色器
        const fs_shader = /*glsl*/`
        precision mediump float;
        void main(){
            //gl_FragColor是最后输出的像素颜色,是一个四维的数据
            gl_FragColor = vec4(1.0,0.0,0.0,1.0);
        }`
        //编译着色器,生成程序对象 操作手，专门负责javaScript和shader着色器的通讯
        const program = initShader(gl,vs_shader,fs_shader)
        //执行绘制
        gl.drawArrays(gl.POINTS,0,1)

    </script>
</body>

</html>